<template>
  <a-modal title-align="start" :footer="false" :title="title" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="600">
    <div class="flex">
      <div class="img-con-left">
        <a-image-preview-group infinite>
          <div class="mb10 img" v-for="(item, index) in productPicList" :key="index">
            <a-image :src="item.url" width="80" height="80" />
          </div>
        </a-image-preview-group>
      </div>
      <div class="form-right">
        <a-form auto-label-width ref="formRef" size="mini" :model="form">
          <a-form-item label="SKU:">
            <div>{{ form.sku }}</div>
          </a-form-item>
          <a-form-item label="名称:">
            <div>{{ form.skuName }}</div>
          </a-form-item>
          <a-form-item v-for="(item, index) of form.propList" :key="index" :label="item.name + ':'">
            <div>{{ getValueStr(item) }}</div>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue'
  import _ from 'lodash-es'
  const props = defineProps(['modelValue', 'type', 'info', 'curTabTitle'])
  const emits = defineEmits(['save', 'update:modelValue'])

  const formRef = ref()
  const title = computed(() => {
    return `${props.curTabTitle}详情`
  })
  const showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })
  const form = ref<any>({})
  const productPicList = ref<Array<any>>([])

  const init = () => {
    form.value = _.cloneDeep(props.info) || {}
    productPicList.value = form.value?.productPicList || []
  }

  const getValueStr = (data: any) => {
    if (data.valueStr) {
      return data.valueStr
    } else {
      return data?.valueStrList.join(',')
    }
  }

  onMounted(init)
</script>

<style lang="less" scoped>
  :deep(.arco-upload-picture-card) {
    width: 80px;
    height: 80px;
  }
  :deep(.arco-upload-list-picture) {
    width: 80px;
    height: 80px;
  }

  :deep(.arco-upload-picture-card-text) {
    font-size: 26px;
  }

  .custom-uplaod-btn {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: var(--color-fill-2);
    border: 1px dashed var(--color-neutral-3);
    border-radius: var(--border-radius-small);
  }

  .img-con-left {
    width: 80px;
  }

  .form-right {
    flex: 1;
    margin-left: 30px;
  }
</style>
